<script lang="ts" setup>
import LcuImage from '@/components/lcuImage.vue'
import { defineProps } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  report: {
    type: Object,
    required: true,
  },
})

const { t } = useI18n()
</script>

<template>
  <div class="user_info h-full flex flex-col justify-between">
    <!-- 头像、ID、等级、在线状态 -->
    <div class="flex items-center">
      <div class="user_avatar">
        <LcuImage :id="data?.profileIconId" radius="999px" type="profile" />
      </div>
      <div class="user_info_main ml-15px h-full flex flex-col justify-between py-1px text-14px">
        <p class="user_name">
          <a-typography-paragraph copyable>{{ data?.gameName }}#{{ data?.tagLine }}</a-typography-paragraph>
        </p>
        <p class="user_level pt-4px pb-8px">
          <span>Lv.{{ data?.summonerLevel }}</span>
          <span>{{ data?.xpSinceLastLevel }}/{{ data?.xpUntilNextLevel }} {{ t(`UserInfo.xpLevel`) }}</span>
        </p>
        <p class="user_roll flex items-center" :class="{ isHidden: !data?.isMy }">
          <span>{{ t(`Rolls.numberOfRolls`) }}: {{ data?.rerollPoints?.numberOfRolls }}</span>
          <span>
            {{ t(`Rolls.currentPoints`) }}: {{ data?.rerollPoints?.currentPoints }}
            <a-tooltip mini :content="t(`Rolls.pointsPerRollDesc`)">
              <icon-question-circle />
            </a-tooltip>
          </span>
        </p>
      </div>
      <div class="user_online ml-auto self-start flex">
        <a-tag v-if="data?.privacy === 'PUBLIC'" color="arcoblue">{{ t(`UserInfo.privacy.public`) }}</a-tag>
        <a-tag v-else-if="data?.privacy === 'PRIVATE'" color="red">{{ t(`UserInfo.privacy.private`) }}</a-tag>
      </div>
    </div>
    <div class="user_reports flex gap-30px">
      <!-- KDA -->
      <div v-if="report?.KDA" class="user_report">
        <p class="report_num">{{ report?.KDA }}</p>
        <a-progress :percent="report?.KDA / 5" class="report_progress" :show-text="false" />
        <p class="report_title">{{ t(`HistoryReport.KDA`) }}</p>
      </div>
      <!-- 胜率 -->
      <div v-if="report?.winRate" class="user_report">
        <p class="report_num">{{ report?.winRate }}%</p>
        <a-progress :percent="report?.winRate / 100" status="success" class="report_progress" :show-text="false" />
        <p class="report_title">{{ t(`HistoryReport.winRate`) }}</p>
      </div>
    </div>
    <div class="user_heros flex items-center justify-between">
      <div class="heros_list flex">
        <div v-for="item, index in report.herosSort" v-show="index < 10" :key="item.championId"
          class="heros_item w-23px h-23px">
          <div class="hero_use_num">{{ item.num }}</div>
          <LcuImage :id="item.championId" width="110%" height="110%" type="champion" />
        </div>
      </div>
      <div class="heros_title text-14px">英雄使用</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user_info {
  padding: 25px;
  background-color: var(--module-bg-color);
  border-radius: var(--module-border-radius);
  box-shadow: var(--module-box-shadow);

  .user_avatar {
    height: 65px;
    width: 65px;
    border-radius: 999px;
  }

  .user_name {
    .arco-typography {
      margin-bottom: 0 !important;
    }
  }

  .user_level,
  .user_roll {
    &.isHidden {
      visibility: hidden;
    }

    span+span {
      margin-left: 15px;
    }
  }

  .user_reports {
    .report_num {
      font-size: 15px;
    }

    .report_progress {
      width: 55px;
    }

    .report_title {
      font-size: 12px;
      margin-top: 4px;
      opacity: 0.7;
    }
  }

  .user_heros {
    height: 30px;

    .heros_list {
      .heros_item {
        overflow: hidden;
        position: relative;

        .hero_use_num {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 1px 3px;
          background-color: #00000060;
          line-height: 1;
          font-size: 10px;
          color: #fff;
          z-index: 2;
          font-weight: bold;
          cursor: default;
        }

        &+.heros_item {
          margin-left: 2px;
        }
      }
    }
  }
}
</style>
